<template>
  <div class="app-main">
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper" style="position: relative">
        <a-form-model :label-col="labelCol" :wrapper-col="wrapperCol" @keyup.enter.native="onQuery">
          <a-row>
            <a-col :span="7">
              <a-form-model-item label="策略名称">
                <a-input v-model="pageFilter.strategyName" placeholder="请输入" />
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="周期">
                <a-select v-model="pageFilter.cycle" allowClear placeholder="请选择" style="width:100%;">
                  <a-select-option v-for="(item, key) in zqArr" :key="key" :value="item.value">{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="7">
              <a-form-model-item label="启用状态">
                <a-select v-model="pageFilter.enableStatus" allowClear placeholder="请选择" style="width:100%;">
                  <a-select-option v-for="(item, key) in statusArr" :key="key" :value="item.value">{{ item.title }}
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="3">
              <a-form-model-item :wrapper-col="{ offset: 0 }" style="margin-bottom: 0">
                <a-button type="primary" @click="onQuery"> 查询 </a-button>
                <a-button style="margin-left: 10px" @click="onResetForm"> 重置 </a-button>
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <a-button type="primary" @click="onAdd()">新增</a-button>
        <a-button :disabled="isDisabled" @click="onDelete()">删除</a-button>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading" :columns="columns"
          :dataSource="pageData" @change="onTableChange" @selectedRowKey="selectedKeys">
          <template slot="enableStatus" slot-scope="text">
            <span style="color:#27BF44" v-if="text == 0">禁用</span>
            <span style="color:#108EE9" v-if="text == 1">启用</span>
          </template>
          <template slot="cycle" slot-scope="text">
            <span>{{ setTittle(text) }}</span>
          </template>
          <template slot="action" slot-scope="text,record">
            <template v-if="record.enableStatus == '0'">
              <a style="color:#108EE9" @click="handleOperate(1, record)">启用</a>
              <a-divider type="vertical" />
            </template>
            <template v-else>
              <a style="color:#27BF44" @click="handleOperate(0, record)">禁用</a>
              <a-divider type="vertical" />
            </template>
            <a style="color:#108EE9" @click="onDetail(record)">详情</a>
          </template>
        </z-table>
      </div>
      <AddModal ref="addModalId" :title=title :policyStatus="policyStatus" @ok="onQuery" />
    </a-card>
  </div>
</template>

<script>
import { getDictItemsFromCache } from '@/api/api'
// import { fd_strategyList, fd_onAndOff, fd_deleteBatch } from '@/api/plugging/authority/fd.js'
// import { jf_strategyList, jf_onAndOff, jf_deleteBatch } from '@/api/plugging/authority/jf.js'
import * as fdApi from '@/api/plugging/authority/fd.js'
import * as jfApi from '@/api/plugging/authority/jf.js'
import AddModal from './modules/AddModal'
export default {
  components: {
    AddModal
  },
  data() {
    return {
      labelCol: { span: 5 },
      wrapperCol: { span: 17 },
      loading: false,
      visible: false,
      reloading: false,
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      isDisabled: true,
      zqArr: getDictItemsFromCache('fd_cycle'),
      statusArr: [
        { title: "全部", value: '', },
        { title: "启用", value: 1, },
        { title: "禁用", value: 0, },
      ],
      columns: [
        {
          title: '序号',
          dataIndex: 'order',
          width: 60,
          align: 'center',
          customRender: (text, record, index) => {
              return `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          }
        },
        {
          title: '策略名称',
          dataIndex: 'strategyName',
          // width: 100,
        },
        {
          title: '起始时间',
          dataIndex: 'startTime',
          width: 120,
        },
        {
          title: '截止时间',
          dataIndex: 'endTime',
          width: 120,
        },
        {
          title: '周期',
          dataIndex: 'cycle',
          // width: 100,
          scopedSlots: { customRender: 'cycle' },
        },
        {
          title: '启用状态',
          dataIndex: 'enableStatus',
          // width: 100,
          scopedSlots: { customRender: 'enableStatus' },
        },
        {
          title: '最近执行时间',
          dataIndex: 'lastExecuteTime',
          width: 120,
        },
        {
          title: '最近业务编号',
          dataIndex: 'lastBusinessNumber',
          width: 120,
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
          width: 120,
        },
        {
          title: '创建人',
          dataIndex: 'createName',
          // width: 100,
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' },
        },
      ],
      pageData: {},
      title: "",
      idArr: [],
      policyStatus: ""
    }
  },
  created() {
    this.getRouter(this.$route.name)
  },
  watch: {
    $route(data) {   //data为当前路由信息
      this.getRouter(data.name)
    }
  },
  methods: {
    getRouter(name) {
      // console.log("11111111111")
      // console.log(name)
      if (name == 'authority-fd_distributionPolicy') { //封堵分发
        this.policyStatus = "fd_db"
      }
      if (name == 'authority-fd_feedbackPolicy') { //封堵反馈
        this.policyStatus = "fd_fb" //封堵分发
      }
      if (name == 'authority-jf_distributionPolicy') {//解封分发
        this.policyStatus = "jf_db" //封堵分发
      }
      if (name == 'authority-jf_feedbackPolicy') {//解封反馈
        this.policyStatus = "jf_fb" //封堵分发
      }
      this.onQuery()
    },
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.pageFilter = {
        pageNo: 1,
        pageSize: 10,
      }
      this.refreshTable()
    },
    selectedKeys(keys) {
      console.log(keys)
      this.idArr = keys
      this.isDisabled = keys.length > 0 ? false : true;
    },
    onTimeChange(date) {
      this.$set(this.pageFilter, 'startRvDate', date[0])
      this.$set(this.pageFilter, 'endRvDate', date[1])
    },
    onTableChange(pagination, pageFilter, sorter) {
      let keyMap = { currentPage: 'pageNo' }
      let paginations = Object.keys(pagination).reduce((newData, key) => {
        let newKey = keyMap[key] || key
        newData[newKey] = pagination[key]
        return newData
      }, {})
      this.pageFilter = Object.assign({}, this.pageFilter, paginations)
      this.refreshTable()
    },
    refreshTable() {
      this.loading = true
      let api = ''
      console.log("policyStatus")
      console.log(this.policyStatus)
      if (this.policyStatus == 'fd_db') api = fdApi.fd_db_strategyList(this.pageFilter)
      if (this.policyStatus == 'fd_fb') api = fdApi.fd_fb_strategyList(this.pageFilter)
      if (this.policyStatus == 'jf_db') api = jfApi.jf_db_strategyList(this.pageFilter)
      if (this.policyStatus == 'jf_fb') api = jfApi.jf_fb_strategyList(this.pageFilter)
      api.then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result : {}
          this.loading = false
        } else {
          this.pageData = {}
          this.$message.success(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warning(res.message)
        })
    },
    onAdd() {
      this.$refs.addModalId.show()
    },
    onDetail(record) {
      this.$refs.addModalId.show(record)
    },
    // 业务操作-启用、停用
    handleOperate(type, record) {
      let that = this
      let title, form = {}, title2
      if (type == '1') {
        title = '启用'
        form = { id: record.id, enableStatus: 1 }
      } else {
        title = '禁用'
        title2 = '必须保持一个策略开启！'
        form = { id: record.id, enableStatus: 0 }
      }
      this.$confirm({
        title: `确定${title}该数据？`,
        content: title2,
        onOk() {
          let api = ''
          if (that.policyStatus == 'fd_db') api = fdApi.fd_db_onAndOff(form)
          if (that.policyStatus == 'fd_fb') api = fdApi.fd_fb_onAndOff(form)
          if (that.policyStatus == 'jf_db') api = jfApi.jf_db_onAndOff(form)
          if (that.policyStatus == 'jf_fb') api = jfApi.jf_fb_onAndOff(form)
          api.then((res) => {
            if (res.success) {
              that.$message.success(res.message ? res.message : `${title}操作成功！`)
              that.onQuery()
            } else {
              that.$message.warn(res.message ? res.message : `${title}操作失败！`)
            }
          }).catch(e => {
            that.$message.warn("操作失败！")
          })
        }
      })
    },
    onDelete(record) {
      // let selectList = this.$refs.table.getSelectedRows()
      // console.log(selectList)
      let that = this;
      this.$confirm({
        title: `你确定要删除所选数据吗？`,
        okText: "确认",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          let api = ''
          if (that.policyStatus == 'fd_db') api = fdApi.fd_db_deleteBatch({ ids: that.idArr.join() })
          if (that.policyStatus == 'fd_fb') api = fdApi.fd_fb_deleteBatch({ ids: that.idArr.join() })
          if (that.policyStatus == 'jf_db') api = jfApi.jf_db_deleteBatch(that.idArr)
          if (that.policyStatus == 'jf_fb') api = jfApi.jf_fb_deleteBatch(that.idArr)
          api.then((res) => {
            that.$refs.table.onClearRowKeys()
            that.$message.success(res.message)
            that.onQuery();
          });
        }
      });
    },
    setTittle(text) {
      return this.$filterDictTextByCache('fd_cycle', text)  //现在字典中对应的文字，是全局函数
    },
    /** 重新加载组件 */
    reload() {
      this.reloading = true
      this.$nextTick(() => (this.reloading = false))
    },
  },
}
</script>
<style lang="less" scoped>
.btnBox {
  position: absolute;
  left: 30%;
  top: 0;
  z-index: 120;
}

/deep/.ant-card-body {
  padding: 15px 24px;
}

/deep/.ant-row {
  margin-bottom: 0
}

/deep/.ant-col-2 {
  width: 5.8% !important;
}

/deep/.ant-form-item {
  margin-bottom: 0
}
</style>
<style lang="less">
.ant-modal-confirm-content {
  color: red !important;
}
</style>